<script>
export default {
  name: 'Modal',
  template: '<div class="my-modal-backdrop" v-if="open">' +
      '<div class="my-modal" :style="modalStyle">' +
      '<div class="my-modal-title">' +
      '<slot name="title"/>' +
      '<span class="my-modal-close" @click="closeModal">&times;</span>' +
      '</div>' +
      '<div class="my-modal-body">' +
      '<div class="my-modal-body-inner"><slot/></div>' +
      '</div>' +
      '</div>' +
      '</div>',
  props: {
    modalStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    open: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    closeModal: function () {
      if (this.open) {
        this.$emit('update:open', false);
        this.$emit('close');
      }
    }
  }
}
</script>

<style scoped>
@import './modal.css';
</style>
